<template>
  <section class="payview">
    <goback :getName='goName' :getURL ="goType" :getBtn='goBtn'></goback>
    <section class="payNum">
      <label >
        <span>
          乐豆
        </span>
        <input type="number" placeholder="请输入充值乐豆" v-model="num">
      </label>
      <label>
        <span>
          支付金额
        </span>
        <span class="money">
          {{num || 0}}
        </span>        
        元
      </label>
      <button class="payBtn" @click="payPlay">确认支付</button>
    </section>
  </section>
</template>

<script>
  import goback from '../../components/goback'
  import { payview, gotopay } from '../../libs/publicMethod'
  import { Indicator } from 'mint-ui'
  export default {
    components: { goback, payview, gotopay, Indicator},
    data () {
      return{
        goName: '充值',
        goType: '',
        goBtn: '',
        channel:'wx_pub', // 充值方式 ：微信———>wx_pub
        num: this.$route.params.num,
        payCreateCharge: {}
      }
    },
    mounted(){      
      let vm = this
      if (this.$route.params.num>0){
        payview(vm.num, vm.channel, (data)=>{
          vm.payCreateCharge = data
        })
      }
    },
    methods: {
      payPlay(){
        let vm = this
        if(vm.num<1){
          vm.$toast('充值金额必须大于等于一元')
          return false
        }
        Indicator.open({
          text: '支付中...',
          spinnerType: 'fading-circle'
        }) 
        if (vm.$route.params.num>0){
            gotopay(vm.payCreateCharge,(payData)=>{
              console.log(payData)
              Indicator.close()
            })
          } else {
            payview(vm.num,vm.channel,(data)=>{
              Indicator.close()
              try {
                gotopay(data,(payData)=>{
                  console.log(payData)
                  // alert(payData)
                })
              } catch (error) {
                Indicator.close()
                location.replace('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx163c4c3d188f8ee5&redirect_uri=http%3A%2F%2Fwww.xiewan8.com%2FlyApp%2F%23%2Fpayview%2F'+vm.num+'&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect')
              }
            })
          }
      }
    },
    watch: {
      num(){
        let vm = this
        vm.num = parseInt(vm.num)
        if(vm.num < 1){
          vm.num = 1
        }
      }
    }
  }
</script>
<style scoped>
  .payNum{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
  }
  .payNum label{
    width: 100%;
    margin-top: 1px;
    background-color: white;
    padding: .5rem;
    box-sizing: border-box;
  }
  .payNum input{
    border: none;
    padding: .5rem;
    outline: none;
  }
  .money{
    font-size: .8rem;
    color: #f76260;
  }
  .payBtn{
    margin-top: 10%;
    width: 90%;
    margin-left: 5%;
    font-size: 1.1rem;
    padding: .5rem;
    background-color: #ffd600;
    border: 1px solid #ffb200;
    border-radius: .3rem;
    outline: none;
  }
</style>

